<template>
  <div cladss="layout">
      <el-row>
          <!-- el-row表示一行 -->
          <!-- 一行通过24个栅格栏进行布局，如果占满一行如下 -->
          <el-col :span="24">24</el-col>
      </el-row>
      <!-- 如果设置18格栅位那么会留出6个位置是空白区域 -->
      <el-row>
          <!-- el-col表示一列 -->
          <el-col :span="18">18</el-col>
      </el-row>
      <!-- 如果想要4列占满24个栅格位，那么每列占6个栅格位 -->
      <el-row>
          <el-col :span="6">6</el-col>
          <el-col :span="6">6</el-col>
          <el-col :span="6">6</el-col>
          <el-col :span="6">6</el-col>
      </el-row>
      <!-- 手册里的el-col 子元素还有一层div它可以被：gutter设置位间隔 -->
       <el-row>
          <el-col :span="6">6</el-col>
      </el-row>
  </div>
  </div>
</template>

<script>
  export default {
      name:'Layout'
  }
</script>

<style scoped>
  .el-row{
      background: #42b983;
      text-align: center;
      margin: 20px 0;
  }
  .el-col{
 
      background: #2c3e50;
      color: white;
      padding:10px 0;
      box-sizing:border-box;
      border: 1px solid white;
  }
</style>